<template>
  <view class="admin-header">
    <view class="admin-box">
      <view
        class="nav"
        :style="{
          paddingTop: statusBarHeight + 'px',
        }"
      >
        <view class="nav-head">
          <!-- #ifndef MP-ALIPAY -->
          <image
              v-if="asyncImgs && asyncImgs.common"
              :src="asyncImgs.common.back"
              mode="widthFix"
              @click="$utils.goBack()"
            />
          <!-- #endif -->
        </view>
      </view>

      <view
        class="header"
        :style="[{ paddingTop: 'calc(' + statusBarHeight + 'px + 44px)' }]"
      >
        <view class="user">
          <view class="userLet">
            <image
              class="img"
              :src="data.store ? data.store.logo || '' : ''"
              mode="aspectFill"
            ></image>

            <view class="txt">
              <view class="shopName">{{
                data.store ? data.store.name || "" : ""
              }}</view>
              <view class="name">{{
                data.store ? data.store.user_name || "" : ""
              }}</view>
            </view>
          </view>
        </view>

        <view class="number">
          <view class="item">
            <view class="em">{{$t('newAdmin.home.home10')}}</view>
            <view class="num">{{
              data.total ? data.total.visit.today_visit_count || 0 : 0
            }}</view>
            <view class="em"
              >{{$t("newAdmin.home.home16")}}
              {{ data.total ? data.total.visit.yet_visit_count || 0 : 0 }}</view
            >
          </view>

          <view class="item">
            <view class="em">{{$t('newAdmin.home.home11')}}</view>
            <view class="num">{{
              data.total ? data.total.order_num.order_count || 0 : 0
            }}</view>
            <view class="em"
              >{{$t("newAdmin.home.home16")}}
              {{
                data.total ? data.total.order_num.yet_order_count || 0 : 0
              }}</view
            >
          </view>

          <view class="item">
            <view class="em">{{$t('newAdmin.home.home12')}}</view>
            <view class="num">
              <view class="s1">{{ getPrect[0] }}</view>
              <view class="s2">.{{ getPrect[1] }}</view>
            </view>
            <view class="em"
              >{{$t("newAdmin.home.home16")}}
              {{ data.total ? data.total.money.yet_money_count || 0 : 0 }}</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="list" v-if="isToggle">
      <view class="item">
        <view class="box">
          <view class="em">{{$t('newAdmin.home.home13')}}</view>
          <view class="des"
            ><view class="desView">{{
              data.total ? data.total.browse.today_see_count || 0 : 0
            }}</view></view
          >
          <view class="em"
            >{{$t("newAdmin.home.home16")}}
            {{ data.total ? data.total.browse.yet_see_count || 0 : 0 }}</view
          >
        </view>
      </view>
      <view class="item">
        <view class="box">
          <view class="em">{{$t('newAdmin.home.home14')}}</view>
          <view class="des"
            ><view class="desView">{{
              data.total ? data.total.buy_people.buy_count || 0 : 0
            }}</view>
          </view>
          <view class="em"
            >{{$t("newAdmin.home.home16")}}
            {{
              data.total ? data.total.buy_people.yet_buy_count || 0 : 0
            }}</view
          >
        </view>
      </view>
      <view class="item">
        <view class="box">
          <view class="em">{{$t('newAdmin.home.home15')}}</view>
          <view class="des"
            ><view class="desView">{{
              data.total ? data.total.pay_order_money.pay_order_money || 0 : 0
            }}</view></view
          >
          <view class="em"
            >{{$t("newAdmin.home.home16")}}
            {{
              data.total
                ? data.total.pay_order_money.yet_pay_order_money || 0
                : 0
            }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isToggle: {
      type: Boolean,
      default: false,
    },

    data: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  computed: {
    getPrect() {
      if (!this.data.total) {
        return [0, "00"];
      }
      let price = String(this.data.total.money.money_count).split(".");
      if (price.length < 2) {
        price[1] = "00";
      } else if (price.length === 2 && parseInt(price[1]) < 10) {
        price[1] = `0${price[1]}`;
      }

      return price;
    },
  },

  methods: {
    init() {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".admin-box")
        .boundingClientRect((data) => {
          try {
            const res = uni.getSystemInfoSync();
            
            this.$nextTick(() => {
              this.$emit("getInfo", {
                top: data.height + "px",
                height: res.windowHeight - data.height + "px",
              });
            });
          } catch (e) {
            // error
          }
        })
        .exec();
    },
  },

  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  padding: 0 32rpx;
  transition: 0.3s all;

  .nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
  }

  image {
    width: 19rpx;
  }
}

.admin-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
}

.user {
  display: flex;
  align-items: center;
  padding: 30rpx 48rpx 0;
}

.userLet {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;

  .img {
    width: 74rpx;
    height: 74rpx;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
  }

  .txt {
    flex: 1;
    overflow: hidden;
    margin-left: 20rpx;
  }
}

.shopName {
  font-size: 32rpx;
  color: #fff;
}

.name {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.4);
}

.shopName,
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.number {
  display: flex;
  padding: 30rpx 0 100rpx;

  .item {
    padding: 0 5rpx;
    width: 33.33%;
    overflow: hidden;
    text-align: center;
  }

  .num {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10rpx 0;
    font-size: 36rpx;
    color: #fff;
    overflow: hidden;

    .s2 {
      padding-bottom: 4rpx;
      font-size: 24rpx;
    }
  }

  .em {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.4);
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
  margin: -40rpx -9rpx 0;
  padding: 0 24rpx;

  .item {
    width: 33.33%;
    padding: 9rpx;
  }

  .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 180rpx;
    padding: 0 16rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
  }

  .em {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.5);
  }

  .des {
    padding: 10rpx 5rpx;
    overflow: hidden;

    .desView {
      font-size: 36rpx;
      color: #fff;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
